import React, { Component } from 'react'

/**
 * 
 * @param {*} props 特点和注意
 * 1. 可以给组件传递任意类型的数据 
 * 2. **props 是只读**（const）的对象，只能读取属性的值，无法修改对象 (单向数据流)
 * 3. 注意：使用类组件时，如果写了构造函数，应该将 props 传递给 super()，否则，无法在构造函数中获取到 props！ 
 */

// 函数子组件
const Fnc = (props) => {
  console.log('函数组件获取父组件传递的数据：', props)
  // props.b = 100000
  return (
    <div>
      <h2>我是函数组件</h2>
      <p>{props.b}</p>
      <p>{props.count}</p>
      <button onClick={() => {
        props.fn(1000, [])
      }}>调用父组件的方法</button>
      <button onClick={props.cgc}>add</button>
    </div>
  )
}

// 类组件
class Child extends Component {
  constructor(props) {
    super(props)
    console.log('获取父组件的props', this.props)
  }


  render () {
    console.log('类组件获取父组件传递的数据：', this.props)
    return (
      <div>
        <h2>我是类组件</h2>
        {this.props.node}
        <p>{this.props.count}</p>
      </div>
    )
  }
}


// 根组件
class App extends Component {

  // 响应数据 => vue => data
  state = {
    // 状态提升
    count: 0,
    obj: { a: 1 },
    list: []
  }

  // 修改count值
  changeCount = () => {
    this.setState({ count: this.state.count + 1 })
  }

  // 父组件提供方法(接收子组件的共享数据)=》传给子组件 =》子组件调用该方法传递共享数据
  parFn = (data1, data2) => {
    console.log('我是父组件的方法', data1, data2)
  }

  render () {
    return (
      <div>
        <h1>组件通信</h1>
        <p>{this.state.count}</p>
        <button onClick={this.changeCount}>add</button>
        <hr />
        <Fnc a="1" b={200} c={true} fn={this.parFn} count={this.state.count} cgc={this.changeCount} />
        <hr />
        <Child count={this.state.count} node={<div><h1>我是模版</h1></div>} obj={this.state.obj} list={this.state.list} fn={this.parFn} count={this.state.count} />
      </div>
    )
  }
}

export default App



